<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="历年合同总数" :total="totalContractNum">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <my-mini-area :data="miniAreaData" />
          </div>
          <template slot="footer">年均合同：<span>20</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今年合同总数" :total="curYearContractNum">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">去年同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">往期同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">整体趋势比</span>
              34%
            </trend>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="证书总数" :total="totalCertificateNum">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <my-mini-bar :data="miniBarData" />
          </div>
          <template slot="footer">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">去年同比</span>
              12%
            </trend>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="年目标达标率" total="78%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <my-mini-progress color="rgb(19, 194, 194)" :target="95" :percentage="70" height="8px" />
          </div>
          <template slot="footer">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">年达标率</span>
              97%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
          </div>
          <a-tab-pane loading="true" tab="公司" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <my-line title="公司合同总数" :data="contractYearNum" :scale="scale" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <my-rank-list title="合同总金额排行榜" :list="contractTotalAmountRank"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="部门" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <my-bar :data="depContractNum" title="部门合同总数" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <my-rank-list title="部门合同排行榜" :list="depContractNumRank"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="证书" key="3">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <div :style="{ padding: '0 32px 32px 32px' }">
                  <h4 :style="{ marginBottom: '20px' }">证书类型</h4>
                  <div>
                    <v-chart :force-fit="true" :height="300" :data="pieData" :scale="pieScale">
                      <v-tooltip :showTitle="false" dataKey="x*percent" />
                      <v-axis />
                      <!--position="right" :offsetX="-200"-->
                      <v-legend dataKey="item" />
                      <v-pie position="percent" color="x" :vStyle="pieStyle" :label="labelConfig"/>
                      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                    </v-chart>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import { ChartCard, RankList, Trend } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import { MyBar, MyLine, MyMiniArea, MyMiniBar, MyMiniProgress, MyRankList } from '../../myComponents/Charts'
import * as api from '@/api/statistics'

const DataSet = require('@antv/data-set')

// const dv = new DataSet.View().source(pieSourceData)
// dv.transform({
//   type: 'percent',
//   field: 'count',
//   dimension: 'item',
//   as: 'percent'
// })
// const pieData = dv.rows
const scale = [{
  dataKey: 'y',
  min: 0
}, {
  dataKey: 'x',
  min: 0,
  max: 1
}]

export default {
  name: 'IndexAnalysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    RankList,
    Trend,

    MyLine,
    MyBar,
    MyMiniArea,
    MyMiniBar,
    MyMiniProgress,
    MyRankList
  },
  data () {
    return {
      contractYearNum: [],
      miniAreaData: [],
      miniBarData: [],
      depContractNum: [],
      pieSourceData: [],
      contractTotalAmountRank: [],
      depContractNumRank: [],
      scale: scale,
      loading: true,

      //
      pieScale: [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
      }],
      pieData: '',
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      labelConfig: ['percent', {
        formatter: (val, item) => {
          return item.point.x + ': ' + val
        }
      }]
    }
  },
  computed: {
    totalContractNum: function () {
      let num = 0
      this.miniAreaData.forEach(item => {
        num += item.y
      })
      return num
    },
    totalCertificateNum: function () {
      let num = 0
      this.miniBarData.forEach(item => {
        num += item.y
      })
      return num
    },
    curYearContractNum: function () {
      return this.miniAreaData.filter(v => v.x === new Date().getFullYear() + '')[0].y
    }
  },
  beforeCreate () {
    setTimeout(() => {
      api.StatisticsContracts({
        x: '年份',
        y: '数量'
      }).then(res => {
        this.miniAreaData = res.result
        this.contractYearNum = res.result
      })
      api.StatisticsContracts({
        x: '部门',
        y: '数量'
      }).then(res => {
        this.depContractNum = res.result
      })
      api.StatisticsCertificates({
        x: '年份',
        y: '数量'
      }).then(res => {
        this.miniBarData = res.result
      })
      api.StatisticsCertificates({
        x: '类型',
        y: '数量'
      }).then(res => {
        this.pieSourceData = res.result
        const dv = new DataSet.View().source(this.pieSourceData)
        dv.transform({
          type: 'percent',
          field: 'y',
          dimension: 'x',
          as: 'percent'
        })
        this.pieData = dv.rows
      })
      api.SortContractsByAmount().then(res => {
        this.contractTotalAmountRank = res.result
      })
      api.SortContractsByDep().then(res => {
        this.depContractNumRank = res.result
      })
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
